<template>
  <el-dialog :title="'服务商入住'" width="70%" :close-on-click-modal="false" :visible.sync="visible">
    <div>
      <div class="container" v-loading="loading">
        <el-alert v-if="ruleForm.state == 1" title="待审核" type="warning" show-icon>
        </el-alert>

        <el-alert v-if="ruleForm.state == 3" show-icon title="审核失败" type="warning" :description="ruleForm.trialMsg">
        </el-alert>

        <el-steps v-if="ruleForm.state != 1" class="steps" :active="active" finish-status="success">
          <el-step title="服务商信息" />
          <el-step title="基础信息" />
          <el-step title="证件信息" />
          <el-step title="提交成功" />
        </el-steps>

        <div v-if="ruleForm.state == 1" style="margin-top: 18px;">
          <el-form :disabled="ruleForm.state == 1" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px"
            class="form">
            <el-form-item label="服务商类型" prop="type">
              <el-radio-group v-model="ruleForm.type">
                <el-radio label="1" name="type">企业</el-radio>
                <el-radio label="2" name="type">个人</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <!--step 2-->
          <el-form :disabled="ruleForm.state == 1" :model="baseInfo" :rules="baseInfoRules" ref="baseInfo" label-width="150px"
            class="form">
            <el-form-item label="联系人姓名" prop="linkName">
              <el-input v-model="baseInfo.linkName" placeholder="请输入联系人姓名" />
            </el-form-item>
            <el-form-item label="联系手机" prop="linkTel">
              <el-input v-model="baseInfo.linkTel" placeholder="输入联系人电话"></el-input>
            </el-form-item>
            <el-form-item label="意向代理城市" prop="proxyCity">
              <el-select v-model="baseInfo.proxyCity" filterable placeholder="请选择">
                <el-option v-for="item in cityOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="预计投入资金" prop="constInput">
              <el-input v-model="baseInfo.constInput" placeholder="输入投入资金" />
            </el-form-item>
            <el-form-item label="联系人邮箱" prop="linkEmail">
              <el-input v-model="baseInfo.linkEmail" placeholder="输入联系人邮箱" />
            </el-form-item>
            <el-form-item label="企业年盈利" prop="annualProfit">
              <el-input v-model="baseInfo.annualProfit" placeholder="输入企业年盈利" />
            </el-form-item>
            <el-form-item v-show="ruleForm.type === '2'" label="现从事行业" prop="industryInvolved">
              <el-select v-model="baseInfo.industryInvolved" placeholder="选择行业">
                <el-option v-for="item in industryOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-show="ruleForm.type === '1'" label="所属行业" prop="industryInvolved">
              <el-select v-model="baseInfo.industryInvolved" placeholder="选择行业">
                <el-option v-for="item in industryOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-show="ruleForm.type === '2'" label="个人情况介绍" style="height:300px">
              <quill-editor style="height:200px" class="editor" v-model="baseInfo.introduction" ref="myQuillEditor"
                :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor>
            </el-form-item>
            <el-form-item label="了解招商途径" prop="theWay">
              <el-radio-group v-model="baseInfo.theWay">
                <el-radio label="招商大会" name="JoinWay">招商大会</el-radio>
                <el-radio label="朋友介绍" name="JoinWay">朋友介绍</el-radio>
                <el-radio label="网络信息" name="JoinWay">网络信息</el-radio>
                <el-radio label="渠道推荐" name="JoinWay">渠道推荐</el-radio>
                <el-radio label="其他" name="JoinWay">其他</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <!--step 3-->
          <el-form v-show="ruleForm.type === '1'" :disabled="ruleForm.state == 1" :model="businessLicense" :rules="businessLicenseRules" ref="businessLicense"
            label-width="150px" class="form">
            <el-form-item label="营业执照" prop="yyImg">
              <el-upload :action="this.$http.adornUrl('/hotel/common/upload')" list-type="picture-card" :before-upload="onSuccessCompany"
                :on-remove="onCompanyIdCardPicFileChange.bind(null, 0)" :on-change="onCompanyIdCardPicFileChange.bind(null, 0)"
                :on-exceed="onExceed" :limit="1">
                <i class="el-icon-plus" />
              </el-upload>
            </el-form-item>
            <el-form-item label="其他证明" prop="otherImgs">
              <el-upload :action="this.$http.adornUrl('/hotel/common/upload')" list-type="picture-card" :on-remove="onCompanyIdCardPicFileChange.bind(null, 1)"
                :on-change="onCompanyIdCardPicFileChange.bind(null, 1)" :on-exceed="onExceed" :limit="1">
                <i class="el-icon-plus" />
              </el-upload>
            </el-form-item>
            <el-form-item label="公司名称" prop="companyName">
              <el-input v-model="businessLicense.companyName" placeholder="输入公司名称" />
            </el-form-item>
            <el-form-item label="企业法人" prop="legalPerson">
              <el-input v-model="businessLicense.legalPerson" placeholder="请输入企业法人" />
            </el-form-item>
            <el-form-item label="统一社会信息码" prop="unifiedCode">
              <el-input v-model="businessLicense.unifiedCode" placeholder="请输入统一社会信息码" />
            </el-form-item>
            <el-form-item label="企业类型" prop="companyType">
              <el-input v-model="businessLicense.companyType" placeholder="请输入企业类型" />
            </el-form-item>
            <el-form-item label="注册资本" prop="registeredCapital">
              <el-input v-model="businessLicense.registeredCapital" placeholder="请输入注册资本" />
            </el-form-item>
            <el-form-item label="注册地址" prop="registeredAddress">
              <el-input v-model="businessLicense.registeredAddress" placeholder="请输入注册地址" />
            </el-form-item>
            <el-form-item label="营业期限" prop="businessTerm">
              <el-input v-model="businessLicense.businessTerm" placeholder="请输入营业期限" />
            </el-form-item>
            <el-form-item label="经营范围" prop="businessScope">
              <el-input v-model="businessLicense.businessScope" placeholder="请输经营范围" />
            </el-form-item>
          </el-form>
          <el-form :disabled="ruleForm.state == 1" :model="certificateInfo" :rules="certificateInfoRule" ref="certificateInfo" label-width="150px"
            class="form">
            <el-form-item label="公司电话" prop="companyTel">
              <el-input v-model="certificateInfo.companyTel" placeholder="请输入公司电话" />
            </el-form-item>
            <el-form-item label="公司经营地址" prop="companyAddress">
              <el-input v-model="certificateInfo.companyAddress" placeholder="请输入经营地址" />
            </el-form-item>
            <el-form-item label="公司规模" prop="companyScale">
              <el-select v-model="certificateInfo.companyScale" placeholder="选择规模">
                <el-option v-for="item in companyScaleOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="主营项目" prop="businessProject">
              <el-input v-model="certificateInfo.businessProject" placeholder="请输入主营项目" />
            </el-form-item>
          </el-form>

          <el-form :disabled="ruleForm.state == 1" v-show="ruleForm.type === '2'" :model="certificateInfo" :rules="idCardRules" ref="certificateInfo2" label-width="150px" class="form">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="certificateInfo.name" placeholder="请输入身份证姓名" />
            </el-form-item>

            <el-form-item label="身份证号" prop="idCard">
              <el-input v-model="certificateInfo.idCard" placeholder="输入身份证号" />
            </el-form-item>

            <el-form-item label="身份证照(正面)" prop="idCardPicList">
              <el-upload :action="this.$http.adornUrl('/hotel/common/upload')" list-type="picture-card" :on-remove="onIdCardPicListFileChange.bind(null, 0)"
                :on-change="onIdCardPicListFileChange.bind(null, 0)" :on-exceed="onExceed" :before-upload="onSuccessIdCard"
                :limit="1">
                <i class="el-icon-plus" />
              </el-upload>
            </el-form-item>

            <el-form-item label="身份证照(反面)" prop="idCardPicList">
              <el-upload :action="this.$http.adornUrl('/hotel/common/upload')" list-type="picture-card" :on-remove="onIdCardPicListFileChange.bind(null, 1)"
                :on-change="onIdCardPicListFileChange.bind(null, 1)" :on-exceed="onExceed" :limit="1">
                <i class="el-icon-plus" />
              </el-upload>
            </el-form-item>

            <el-form-item label="身份证照(手持)" prop="idCardPicList">
              <el-upload :action="this.$http.adornUrl('/hotel/common/upload')" list-type="picture-card" :on-remove="onIdCardPicListFileChange.bind(null, 2)"
                :on-change="onIdCardPicListFileChange.bind(null, 2)" :on-exceed="onExceed" :limit="1">
                <i class="el-icon-plus" />
              </el-upload>
              <a @click="showTips = true">详情要求</a>
            </el-form-item>

            <el-form-item label="" prop="accept">
              <el-checkbox :label="true" disabled v-model="ruleForm.accept">同意</el-checkbox>
              <a @click="protocol = true">{{ hotelProtocol.name }}</a>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" disabled>待审核</el-button>
            </el-form-item>
          </el-form>


        </div>

        <div v-else>


          <el-form v-show="active === 0" :disabled="ruleForm.state == 1" :model="ruleForm" :rules="rules" ref="ruleForm"
            label-width="auto" class="form">
            <el-form-item label="服务商类型" prop="type">
              <el-radio-group v-model="ruleForm.type">
                <el-radio label="1" name="type">企业</el-radio>
                <el-radio label="2" name="type">个人</el-radio>
              </el-radio-group>
            </el-form-item>
            <!--        <el-form-item label="图片验证码" prop="captcha">
          <el-row>
            <el-col :span="8"><el-input v-model="ruleForm.captcha" placeholder="请输入图片验证码"></el-input></el-col>
            <el-col :span="10" class="login-captcha"><img style="margin-left:10px" :src="captchaPath" @click="getCaptcha()" alt="" /></el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="短信验证码" prop="smsCode">
          <el-row>
            <el-col :span="8"><el-input v-model="ruleForm.smsCode" placeholder="请输入短信验证码" /></el-col>
            <el-col :span="10">
              <el-button style="margin-left:10px" :disabled="!ruleForm.captcha || isSend" @click="sendSmsCode()">{{ isSend ? '(' + timer + ')秒后重试' : '发送' }}</el-button>
            </el-col>
          </el-row>
        </el-form-item> -->
            <el-form-item label="" prop="accept">
              <el-checkbox :label="true" v-model="ruleForm.accept">同意</el-checkbox>
              <a @click="protocol = true">{{ hotelProtocol.name }}</a>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="step1Submit" :disabled="!ruleForm.accept">下一步，填写基础信息</el-button>
            </el-form-item>
          </el-form>
          <!--step 2-->
          <el-form v-show="active === 1" :disabled="ruleForm.state == 1" :model="baseInfo" :rules="baseInfoRules" ref="baseInfo"
            label-width="150px" class="form">
            <el-form-item label="联系人姓名" prop="linkName">
              <el-input v-model="baseInfo.linkName" placeholder="请输入联系人姓名" />
            </el-form-item>

            <el-form-item label="联系手机" prop="linkTel">
              <el-input v-model="baseInfo.linkTel" placeholder="输入联系人电话"></el-input>
            </el-form-item>
            <el-form-item label="意向代理城市" prop="proxyCity">
              <el-select v-model="baseInfo.proxyCity" filterable placeholder="请选择">
                <el-option v-for="item in cityOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="预计投入资金" prop="constInput">
              <el-input v-model="baseInfo.constInput" placeholder="输入投入资金" />
            </el-form-item>
            <el-form-item label="联系人邮箱" prop="linkEmail">
              <el-input v-model="baseInfo.linkEmail" placeholder="输入联系人邮箱" />
            </el-form-item>
            <el-form-item label="企业年盈利" prop="annualProfit">
              <el-input v-model="baseInfo.annualProfit" placeholder="输入企业年盈利" />
            </el-form-item>
            <el-form-item v-show="ruleForm.type === '2'" label="现从事行业" prop="industryInvolved">
              <el-select v-model="baseInfo.industryInvolved" placeholder="选择行业">
                <el-option v-for="item in industryOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-show="ruleForm.type === '1'" label="所属行业" prop="industryInvolved">
              <el-select v-model="baseInfo.industryInvolved" placeholder="选择行业">
                <el-option v-for="item in industryOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-show="ruleForm.type === '2'" label="个人情况介绍" style="height:300px">
              <quill-editor style="height:200px" class="editor" v-model="baseInfo.introduction" ref="myQuillEditor"
                :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor>
            </el-form-item>
            <el-form-item label="了解招商途径" prop="theWay">
              <el-radio-group v-model="baseInfo.theWay">
                <el-radio label="招商大会" name="JoinWay">招商大会</el-radio>
                <el-radio label="朋友介绍" name="JoinWay">朋友介绍</el-radio>
                <el-radio label="网络信息" name="JoinWay">网络信息</el-radio>
                <el-radio label="渠道推荐" name="JoinWay">渠道推荐</el-radio>
                <el-radio label="其他" name="JoinWay">其他</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-row type="flex">
              <el-form-item>
                <el-button @click="active = 0">上一步</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="step2Submit">下一步，填写证件信息</el-button>
              </el-form-item>
            </el-row>
          </el-form>
          <!--step 3-->
          <el-form v-show="active === 2 && ruleForm.type === '1'" :disabled="ruleForm.state == 1" :model="businessLicense"
            :rules="businessLicenseRules" ref="businessLicense" label-width="150px" class="form">
            <h2>
              <span>企业</span>
              <span class="strong">(*必填)</span>
            </h2>
            <el-form-item label="营业执照" prop="yyImg">
              <el-upload :action="this.$http.adornUrl('/hotel/common/upload')" list-type="picture-card" :before-upload="onSuccessCompany"
                :on-remove="onCompanyIdCardPicFileChange.bind(null, 0)" :on-change="onCompanyIdCardPicFileChange.bind(null, 0)"
                :on-exceed="onExceed" :limit="1">
                <i class="el-icon-plus" />
              </el-upload>
            </el-form-item>
            <el-form-item label="其他证明" prop="otherImgs">
              <el-upload :action="this.$http.adornUrl('/hotel/common/upload')" list-type="picture-card" :on-remove="onCompanyIdCardPicFileChange.bind(null, 1)"
                :on-change="onCompanyIdCardPicFileChange.bind(null, 1)" :on-exceed="onExceed" :limit="1">
                <i class="el-icon-plus" />
              </el-upload>
            </el-form-item>
            <el-form-item label="公司名称" prop="companyName">
              <el-input v-model="businessLicense.companyName" placeholder="输入公司名称" />
            </el-form-item>
            <el-form-item label="企业法人" prop="legalPerson">
              <el-input v-model="businessLicense.legalPerson" placeholder="请输入企业法人" />
            </el-form-item>
            <el-form-item label="统一社会信息码" prop="unifiedCode">
              <el-input v-model="businessLicense.unifiedCode" placeholder="请输入统一社会信息码" />
            </el-form-item>
            <el-form-item label="企业类型" prop="companyType">
              <el-input v-model="businessLicense.companyType" placeholder="请输入企业类型" />
            </el-form-item>
            <el-form-item label="注册资本" prop="registeredCapital">
              <el-input v-model="businessLicense.registeredCapital" placeholder="请输入注册资本" />
            </el-form-item>
            <el-form-item label="注册地址" prop="registeredAddress">
              <el-input v-model="businessLicense.registeredAddress" placeholder="请输入注册地址" />
            </el-form-item>
            <el-form-item label="营业期限" prop="businessTerm">
              <el-input v-model="businessLicense.businessTerm" placeholder="请输入营业期限" />
            </el-form-item>
            <el-form-item label="经营范围" prop="businessScope">
              <el-input v-model="businessLicense.businessScope" placeholder="请输经营范围" />
            </el-form-item>
          </el-form>
          <el-form v-show="active === 2 && ruleForm.type === '1'" :model="certificateInfo" :rules="certificateInfoRule"
            ref="certificateInfo" label-width="150px" class="form">
            <el-form-item label="公司电话" prop="companyTel">
              <el-input v-model="certificateInfo.companyTel" placeholder="请输入公司电话" />
            </el-form-item>
            <el-form-item label="公司经营地址" prop="companyAddress">
              <el-input v-model="certificateInfo.companyAddress" placeholder="请输入经营地址" />
            </el-form-item>
            <el-form-item label="公司规模" prop="companyScale">
              <el-select v-model="certificateInfo.companyScale" placeholder="选择规模">
                <el-option v-for="item in companyScaleOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="主营项目" prop="businessProject">
              <el-input v-model="certificateInfo.businessProject" placeholder="请输入主营项目" />
            </el-form-item>
            <el-row type="flex">
              <el-form-item>
                <el-button @click="active = 1">上一步</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" v-if="ruleForm.state == 1" disabled>待审核</el-button>
                <el-button type="primary" v-else-if="ruleForm.state == 3" @click="applySubmit">重新提交</el-button>
                <el-button type="primary" v-else @click="applySubmit">提交</el-button>
              </el-form-item>
            </el-row>
          </el-form>

          <el-form v-show="active === 2 && ruleForm.type === '2'" :model="certificateInfo" :rules="idCardRules" ref="certificateInfo2"
            label-width="150px" class="form">
            <h2>
              <span>个人</span>
              <span class="strong">(*必填)</span>
              <el-tag>需与酒店联系人保持一致</el-tag>
            </h2>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="certificateInfo.name" placeholder="请输入身份证姓名" />
            </el-form-item>

            <el-form-item label="身份证号" prop="idCard">
              <el-input v-model="certificateInfo.idCard" placeholder="输入身份证号" />
            </el-form-item>

            <el-form-item label="身份证照(正面)" prop="idCardPicList">
              <el-upload :action="this.$http.adornUrl('/hotel/common/upload')" list-type="picture-card" :on-remove="onIdCardPicListFileChange.bind(null, 0)"
                :on-change="onIdCardPicListFileChange.bind(null, 0)" :on-exceed="onExceed" :before-upload="onSuccessIdCard"
                :limit="1">
                <i class="el-icon-plus" />
              </el-upload>
            </el-form-item>

            <el-form-item label="身份证照(反面)" prop="idCardPicList">
              <el-upload :action="this.$http.adornUrl('/hotel/common/upload')" list-type="picture-card" :on-remove="onIdCardPicListFileChange.bind(null, 1)"
                :on-change="onIdCardPicListFileChange.bind(null, 1)" :on-exceed="onExceed" :limit="1">
                <i class="el-icon-plus" />
              </el-upload>
            </el-form-item>

            <el-form-item label="身份证照(手持)" prop="idCardPicList">
              <el-upload :action="this.$http.adornUrl('/hotel/common/upload')" list-type="picture-card" :on-remove="onIdCardPicListFileChange.bind(null, 2)"
                :on-change="onIdCardPicListFileChange.bind(null, 2)" :on-exceed="onExceed" :limit="1">
                <i class="el-icon-plus" />
              </el-upload>
              <a @click="showTips = true">详情要求</a>
            </el-form-item>

            <el-row type="flex">
              <el-form-item>
                <el-button @click="active = 1">上一步</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="applySubmit2">提交</el-button>
              </el-form-item>
            </el-row>
          </el-form>
          <div style="text-align: center">
            <el-form v-if="active === 3">
              <template v-if="ruleForm.state == 2">
                <label class="el-icon-circle-check active-icon"></label>
                <p class="active-text">您已通过审核</p>
                <p class="active-text">服务商编号：{{baseInfo.id}}</p>
              </template>

              <template v-else>
                <label class="el-icon-circle-check active-icon"></label>
                <p class="active-text">提交成功，请等待审核</p>
              </template>

              <el-row type="flex" v-show="errorMessage != null">
                <el-form-item>
                  <el-button @click="active = 2">上一步</el-button>
                </el-form-item>
                <el-form-item>提交失败,{{ errorMessage }}</el-form-item>
              </el-row>
            </el-form>
          </div>


        </div>

        <el-dialog :append-to-body="true" :visible.sync="showTips" title="手持身份证拍照要求">
          <img src="../../../assets/img/idCardSuccess.jpg" />
          <img src="../../../assets/img/idCardError.jpg" />
          <ul>
            <li>免冠，建议未化妆，五关可见;</li>
            <li>身份证全部信息清晰无遮挡，否则将无法通过认证;</li>
            <li>完整露出手臂;</li>
            <li>以酒店门头招牌为背景图片;</li>
            <li>请勿进行任何软件处理;</li>
            <li>单张图片不超过5M，尺寸要求500（长）X412（宽）以上，支持jpg、png、gif;</li>
          </ul>
        </el-dialog>
        <el-dialog :append-to-body="true" :visible.sync="protocol" title="加盟协议">
          <div class="map-wrap" v-html="hotelProtocol.content"></div>
        </el-dialog>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import {
    getUUID
  } from '@/utils';
  import citiesData from './cities.json';

  export default {
    data: () => {
      return {
        visible: false,
        loading: false,
        isSend: false,
        timer: 60,
        hotelProtocol: {
          name: '',
          content: ''
        },
        protocol: false,
        captchaPath: '',
        editorOption: {
          placeholder: '填写个人介绍'
        },
        active: 0,
        errorMessage: null,
        cityOptions: [],
        industryOptions: [{
            label: 'IT服务',
            value: 'IT服务'
          },
          {
            label: '制造业',
            value: '制造业'
          },
          {
            label: '批发/零售',
            value: '批发/零售'
          },
          {
            label: '生活服务',
            value: '生活服务'
          },
          {
            label: '文化/体育',
            value: '文化/体育'
          },
          {
            label: '建筑/房地产',
            value: '建筑/房地产'
          },
          {
            label: '教育',
            value: '教育'
          },
          {
            label: '运输',
            value: '运输'
          },
          {
            label: '医疗',
            value: '医疗'
          },
          {
            label: '金融',
            value: '金融'
          },
          {
            label: '其他',
            value: '其他'
          }
        ],
        companyScaleOptions: [{
            label: '20人',
            value: 20
          },
          {
            label: '50人',
            value: 50
          },
          {
            label: '100人',
            value: 100
          },
          {
            label: '1000人',
            value: 1000
          }
        ],
        props: {
          label: 'name',
          value: 'id',
          children: 'brands'
        },
        ruleForm: {
          captcha: '',
          uuid: '',
          accept: '',
          smsCode: '',
          type: '1',
          brand: '',
          introduction: '',
          trialMsg: '',
          state: 0,
        },
        rules: {
          accept: [{
            required: true,
            message: '请同意加盟协议'
          }],
          linkTel: [{
            required: true,
            message: '请输入联系人电话'
          }],
          type: [{
            required: true,
            message: '请输入服务商类型'
          }]
        },
        idCardRules: {
          name: [{
            required: true,
            message: '请输入姓名'
          }],
          idCard: [{
            required: true,
            message: '请输入身份证'
          }]
        },
        baseInfo: {
          id: '',
          linkName: '',
          linkTel: '',
          userId: '',
          linkEmail: '',
          proxyCity: '',
          constInput: '',
          theWay: '',
          annualProfit: ''
        },
        baseInfoRules: {
          linkName: [{
            required: true,
            message: '请输入联系人'
          }],
          linkTel: [{
            required: true,
            message: '请输入联系人电话'
          }],
          proxyCity: [{
            required: true,
            message: '请选着代理城市'
          }],
          industryInvolved: [{
            required: true,
            message: '请选着行业'
          }],
          linkEmail: [{
            required: true,
            message: '请输入服务商类型'
          }],
          constInput: [{
            required: true,
            message: '请输入服务商类型'
          }]
          /* introduction: [
                  { required: true, message: "请输入酒店介绍" }
                ]*/
        },
        certificateInfo: {
          companyTel: '',
          companyScale: '',
          companyAddress: '',
          businessProject: '',
          industryInvolved: '',
          individualResume: '',
          companyIdCard: '',
          idCard: '',
          name: '',
          sfzFront: '',
          sfzBack: '',
          cardType: '身份证',
          sfzHand: ''
        },
        businessLicense: {
          companyName: '',
          unifiedCode: '',
          legalPerson: '',
          companyType: '',
          registeredCapital: '',
          registeredAddress: '',
          registeredTime: '',
          businessTerm: '',
          businessScope: ''
        },
        businessLicenseRules: {
          companyName: [{
            required: true,
            message: '请输入公司名称'
          }],
          unifiedCode: [{
            required: true,
            message: '请输入统一社会信息码'
          }],
          legalPerson: [{
            required: true,
            message: '请输入法人'
          }],
          companyType: [{
            required: true,
            message: '请输入公司类型'
          }]
        },
        certificateInfoRule: {
          yyImg: [{
            required: true,
            message: '请上传营业执照'
          }],
          companyAddress: [{
            required: true,
            message: '请输入公司地址'
          }],
          companyScale: [{
            required: true,
            message: '请选着公司规模'
          }]
        },
        markers: [],
        mapCenter: [114.05558, 22.539679],
        showMap: false,
        showTips: false
      };
    },

    methods: {
      async init() {
        Object.assign(this.$data, this.$options.data());
        //this.fetchhotelBrands();
        const citys = citiesData.reduce((p, n) => {
          for (let i in n.items) {
            p.push({
              label: n.items[i].name,
              value: n.items[i].name,
              pinyin: n.items[i].pinyin
            });
          }
          return p;
        }, []);
        this.cityOptions = citys;
        this.visible = true;
        this.fetchhotelProtocol();
        this.checkSellerApply();
        this.$nextTick(() => {
          this.getCaptcha();
        })
      },
      async sendSmsCode() {
        await this.checkSellerApply();
        await this.$http({
          url: this.$http.adornUrl('/hotel/common/smsCode'),
          method: 'get',
          params: this.$http.adornParams({
            mobile: this.ruleForm.linkTel,
            uuid: this.ruleForm.uuid,
            captchaCode: this.ruleForm.captcha
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.isSend = true;
            let time = setInterval(() => {
              this.timer -= 1;
              if (this.timer <= 0) {
                clearInterval(time);
                this.isSend = false;
              }
            }, 1000);
          } else {
            this.$message.error(data.msg);
            this.getCaptcha();
          }
        });
      },
      // 获取验证码
      getCaptcha() {
        this.ruleForm.uuid = getUUID();
        this.captchaPath = this.$http.adornUrl(`/captcha.jpg?uuid=${this.ruleForm.uuid}`);
      },
      onEditorBlur() {},
      onEditorFocus() {
        //获得焦点事件
      },
      onEditorChange() {
        //内容改变事件
      },
      checkSellerApply() {
        this.loading = true;
        this.$http({
          url: this.$http.adornUrl('/sys/user/checkSellerApply2'),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({
          data
        }) => {
          this.loading = false;
          if (data && data.code === 0) {
            const fac = data.data;
            this.baseInfo = {
              linkName: fac.linkName,
              linkEmail: fac.linkEmail,
              linkTel: fac.linkTel,
              proxyCity: fac.proxyCity,
              constInput: fac.constInput,
              theWay: fac.theWay,
              annualProfit: fac.annualProfit,
              introduction: fac.introduction,
              industryInvolved: fac.industryInvolved,
              userId: fac.userId,
              id: fac.id
            };
            this.ruleForm = {
              type: fac.type + "",
              trialMsg: fac.trialMsg,
              accept: true,
              state: fac.state
            };
            this.certificateInfo = {
              companyTel: fac.companyTel,
              companyScale: fac.companyScale,
              companyAddress: fac.companyAddress,
              businessProject: fac.businessProject,
              individualResume: fac.individualResume,
              companyIdCard: fac.companyIdCard,
              idCard: fac.idCard,
              name: fac.name,
              sfzFront: fac.sfzFront,
              sfzBack: fac.sfzBack,
              cardType: '身份证',
              sfzHand: fac.sfzHand
            };
            if (fac.state == 2) {
              this.active = 3;
            } else {
              this.active = 1;
            }
          } else {
            this.$message.error(data.msg);
          }
        });
      },
      step1Submit() {
        //校验验证码
        if (!this.ruleForm.accept) this.ruleForm.accept = null;
        this.$refs.ruleForm.validate(valid => {
          if (!valid) return false;
          // this.$http({
          //   url: this.$http.adornUrl('/hotel/common/checkSmsCode'),
          //   method: 'get',
          //   params: this.$http.adornParams({
          //     mobile: this.ruleForm.linkTel,
          //     vcode: this.ruleForm.smsCode
          //   })
          // }).then(({ data }) => {
          //   if (data && data.code === 0) {
          //     this.active = 1;
          //   } else {
          //     this.$message.error(data.msg);
          //   }
          // });
          this.active = 1;
        });
      },
      fetchhotelProtocol() {
        this.$http({
          url: this.$http.adornUrl('/hotel/hotelprotocol/info/4'),
          method: 'get'
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.hotelProtocol = data.hotelProtocol ? data.hotelProtocol : {};
          } else {
            this.hotelProtocol = {};
          }
        });
      },
      step2Submit() {
        this.$refs.baseInfo.validate(valid => {
          if (!valid) {
            return false;
          }
          this.active = 2;
        });
      },
      applySubmit() {
        this.$refs.businessLicense.validate(va => {
          if (!va) {
            return false;
          }
          this.$refs.certificateInfo.validate(valid => {
            if (!valid) {
              return false;
            }
            this.$http({
              url: this.$http.adornUrl('/hotel/facilitator/apply'),
              method: 'post',
              data: this.$http.adornData({
                ...this.ruleForm,
                ...this.baseInfo,
                ...this.certificateInfo,
                ...this.businessLicense
              })
            }).then(({
              data
            }) => {
              if (data && data.code === 0) {
                this.active = 3;
                this.errorMessage = null;
              } else {
                this.active = 3;
                this.errorMessage = data.message;
              }
            });
          });
        });
      },
      applySubmit2() {
        this.$refs.certificateInfo2.validate(valid => {
          if (!valid) {
            return false;
          }
          this.loading = true;
          this.$http({
            url: this.$http.adornUrl('/hotel/facilitator/apply'),
            method: 'post',
            data: this.$http.adornData({
              ...this.ruleForm,
              ...this.baseInfo,
              ...this.certificateInfo,
              ...this.businessLicense
            })
          }).then(({
            data
          }) => {
            this.loading = false;
            if (data && data.code === 0) {
              this.active = 3;
              this.ruleForm.state = 0;
              this.errorMessage = null;
            } else {
              this.active = 3;
              this.errorMessage = data.message;
            }
          });
        });
      },
      onSuccessIdCard(file) {
        const formData = new FormData();
        formData.append('file', file);
        this.$http({
          url: this.$http.adornUrl('/hotel/facilitator/parse-id-card'),
          method: 'post',
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.certificateInfo = {
              ...this.certificateInfo,
              ...data.idCardInfo
            };
          } else {}
        });
      },
      onSuccessCompany(file) {
        const formData = new FormData();
        formData.append('file', file);
        this.$http({
          url: this.$http.adornUrl('/hotel/facilitator/parse-license'),
          method: 'post',
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.businessLicense = data.license;
          } else {}
        });
      },
      onIdCardPicListFileChange(index, file, fileList) {
        const list = fileList.filter(item => item.status === 'success').map(item => item.response.url);
        if (index == 0) {
          this.$set(this.certificateInfo, 'sfzFront', list[0]);
        }
        if (index == 1) {
          this.$set(this.certificateInfo, 'sfzBack', list[0]);
        }
        if (index == 2) {
          this.$set(this.certificateInfo, 'sfzHand', list[0]);
        }
      },
      onCompanyIdCardPicFileChange(index, file, fileList) {
        const list = fileList.filter(item => item.status === 'success').map(item => item.response.url);
        if (index == 0) {
          this.$set(this.certificateInfo, 'yyImg', list[0]);
        }
        if (index == 1) {
          this.$set(this.certificateInfo, 'otherImgs', list[0]);
        }
      },
      onExceed(file, fileList) {
        this.$message.error(`最多上传${fileList.length}张`);
      }
    }
  };
</script>

<style lang="scss">
  .container {
    margin: 0 auto;
    width: 1200px;

    .login-captcha {
      img {
        max-width: 100%;
        height: 34px;
      }
    }

    .active-icon {
      color: #67c23a;
      font-size: 48px;
      margin: 58px 0 18px 0;
    }

    .active-text {
      font-size: 15px;
      margin-bottom: 20px;
    }

    .steps {
      margin: 20px 0;
    }

    .form {
      width: 800px;
    }

    .map-wrap {
      position: relative;

      .map {
        height: 400px;
      }

      .map-search {
        position: absolute;
        left: 20px;
        top: 20px;
      }
    }

    .strong {
      color: red;
    }
  }
</style>
